<template>
	<view>
        <view class="tpf-logo-wrap">
        	<image class="tpf-logo" mode="aspectFit" src="/static/logo.png"></image>
        </view>
		<view class="tpf-form reset">
			<view class="tpf-form-item">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="tpf-form-item">
				<input placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="tpf-form-item">
				<input placeholder="请输入密码,6-18位" v-model="passwd" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="tpf-reg-login-btn" @tap="doReg">立即注册</view>
			<view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import md5 from '@/common/js/md5.js'
	import {SECRET_KEY} from '@/common/js/config.js'
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				passwd:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false
			}
		},
		onLoad() {
			console.log(this.$Helper.getCache("token"));
		},
		methods: {
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					this.$Helper.tpfToast({title: '请填写正确手机号码'});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)";
				
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
				},1000)
			},
			doReg(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				}
				
				if(!(/^\d{4}$/.test(this.code))){
					uni.showToast({title: '请输入正确的验证码',icon:"none"});
					return false; 
				}
				
				if(this.passwd.length<6 || this.passwd.lenght>18){
					uni.showToast({title: '密码长度6-18位',icon:"none"});
					return false; 
				}
				
				uni.showLoading({
					title: '提交中...'
				});
			},
			toLogin(){ 
				uni.hideKeyboard()
				uni.redirectTo({url: '/pages/ucenter/login/login'});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" src="./login.scss"></style>